<template>
  <div class="lix-fol__container">
    <div class="lix-fol__nav">
      <scroll-view scroll-x="true" class="lix-fol__nav--body">
        <div class="item" v-for="(item, idx) in naviFirstList" :key="idx" :class="[topScrollSelectId === item.id ? 'active item' : 'item']" @click="naviTopScrollClick" :data-id="item.id">
          <div class="name">{{ item.key }}</div>
          <div :class="[topScrollSelectId === item.id ? 'seperate' : '']"></div>
        </div>
      </scroll-view>
    </div>
    <!-- 学校列表 -->
    <div class="lix-fol__list" v-if="topScrollSelectId === 1">
      <Abnor v-if="schoolNoData" type="DATA" />
      <div class="lix-fol__item" v-for="(item, idx) in schoolList" :key="idx" :data-id="item.id" @click="schoolItemClick">
        <image :src="item.cover" />
        <div class="info">
          <p class="title zan-ellipsis">{{ item.name }}</p>
          <p class="author">地址: {{ item.region }}{{ item.address_detail }}</p>
          <div class="weui-rate-wrap lix-schl__rate">
            <ul class="weui-rate">
              <li class="weui-rate-item" v-for="(n, index) in max" :key="index" :class="{'weui-rate-item-active' : index <= item.grade}" :data-index='index'>
                <div class="weui-rate-item-def"></div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <ZanLoadmore :loading="schoolLoading" :nomore="!schoolHasNextPage" v-if="!schoolNoData"/>
    </div>

    <!-- 老师列表 -->
    <div class="lix-teac__list" v-if="topScrollSelectId === 2">
      <Abnor v-if="teacherNoData" type="DATA" />
      <div class="lix-teac__item" v-for="(item, idx) in teacherList" :key="idx" :data-id="item.id" @click="teacherItemClick">
        <image :src="item.avatar" />
        <div class="info">
          <div class="name">
            <p class="author">{{ item.name }}</p>
            <image v-if="item.gender == 1" src="../../static/image/man.png" />
            <image v-else src="../../static/image/women.png" />
          </div>
          <div class="weui-rate-wrap lix-teac__rate">
            <ul class="weui-rate">
              <li class="weui-rate-item" v-for="(n, index) in max" :key="index" :class="{'weui-rate-item-active' : index <= item.grade}" :data-index='index'>
                <div class="weui-rate-item-def"></div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <ZanLoadmore :loading="teacherLoading" :nomore="!teacherHasNextPage" v-if="!teacherNoData"/>
    </div>
  </div>
</template>

<script>
import { FOLLOW_SCHOOL_LIST, FOLLOW_TEACHER_LIST } from '../../store/mutation-types';
import { mapGetters, mapActions } from 'vuex';
import ZanLoadmore from '../../../node_modules/mpvue-zanui/src/components/zan/loadmore';
import Abnor from '@/components/abnor/abnor';

export default {
  components: {
    ZanLoadmore,
    Abnor
  },
  computed: {
    ...mapGetters('followSchool', {
      schoolList: 'list',
      schoolLoading: 'loading',
      schoolHasNextPage: 'hasNextPage',
      schoolNoData: 'noData',
      schoolCurrentPage: 'currentPage'
    }),
    ...mapGetters('followTeacher', {
      teacherList: 'list',
      teacherLoading: 'loading',
      teacherHasNextPage: 'hasNextPage',
      teacherNoData: 'noData',
      teacherCurrentPage: 'currentPage'
    })
  },
  data() {
    return {
      topScrollSelectId: 1,
      naviFirstList: [
        {id: 1, key: '精品学校'},
        {id: 2, key: '明星老师'}
      ],
      max: 5,
      tempValue: 3
    };
  },
  onLoad() {
    this.getSchoolListData({
      page: 1,
      params: {}
    });
    this.getTeacherListData({
      page: 1,
      params: {}
    });
  },
  onUnload() {
    console.log('页面卸载');
    // this.destroyedState();
    this.destroyedSchoolState();
    this.destroyedTeacherState();
  },
  onReachBottom() {
    if (this.topScrollSelectId === 1) {
      if (this.schoolHasNextPage) {
        this.getSchoolListData(this.currentPage + 1);
      }
    } else {
      if (this.teacherHasNextPage) {
        this.getTeacherListData(this.currentPage + 1);
      }
    }
  },
  methods: {
    ...mapActions('followSchool', {
      'getSchoolListData': FOLLOW_SCHOOL_LIST,
      'destroyedSchoolState': 'destroyedState'
    }),
    ...mapActions('followTeacher', {
      'getTeacherListData': FOLLOW_TEACHER_LIST,
      'destroyedTeacherState': 'destroyedState'
    }),
    naviTopScrollClick(e) {
      console.log('navi top click');
      console.log(e);
      this.topScrollSelectId = e.mp.currentTarget.dataset.id;
    },
    schoolItemClick(e) {
      console.log(e);
      const id = e.mp.currentTarget.dataset.id;
      wx.navigateTo({
        url: '/pages/index/school?id=' + id
      });
    },
    teacherItemClick(e) {
      console.log(e);
      const id = e.mp.currentTarget.dataset.id;
      wx.navigateTo({
        url: '/pages/index/teacher?id=' + id
      });
    }
  }
};
</script>

<style lang="scss">
@import "../../theme-chalk/myfollow.scss";
@import "../../theme-chalk/teacherList.scss";
.lix-teac__list {
  padding-top: 44px;
}
</style>

